<template>
	<view>
		<loading ref="loading"></loading>
		<view class="top">
			<view class="kapian u-flex-col u-row-center u-p-30" >
				<view class="icon" style="position: absolute; top: -30rpx;right: -20rpx;"><image :src="vk.getVuex('$setting.score.icon')"></image></view>
				<view class="shuom u-font-12 u-tips-color">当前可用{{vk.getVuex('$setting.score.name')}}</view>
				<view class="price u-p-t-10">{{vk.getVuex('$user.userInfo.score')}}</view>
			</view>
		</view>
		<view class="u-p-l-30 u-p-r-30" style="position: relative;border-radius: 24rpx 24rpx 0 0;margin-top: 240rpx;" :style="{backgroundColor: vk.getVuex('$app.config.bg.navbar')}">
			<view class="u-p-t-50 u-p-b-50 border-bottom" :style="{borderColor: vk.getVuex('$app.config.color.border')}">
				<u-section :title="vk.getVuex('$setting.score.name')+'任务'" :color="vk.getVuex('$app.config.color.main')" :line-color="vk.getVuex('$app.config.color.sec')" :bold="true" font-size="34" :right="false"></u-section>
			</view>
			<view class="safe-area-inset-bottom">
				<view class="tab u-flex u-row-between u-col-center border-bottom u-p-t-30 u-p-b-30">
					<view class="u-flex u-row-left u-col-center">
						<view class="icon u-flex u-row-center u-col-center"><u-icon name="/static/icon/user2.png" size="46"></u-icon></view>
						<view class="u-p-l-20 u-p-t-10" :style="{color: vk.getVuex('$app.config.color.light')}">
							<view class="" :style="{color: vk.getVuex('$app.config.color.main')}">每日签到</view>
							<view class="u-font-12 light u-p-t-5">+{{vk.getVuex('$setting.score.sign_score')}}{{vk.getVuex('$setting.score.name')}}/天</view>
						</view>
					</view>
					<view class="btn" hover-class="hover-class" hover-stay-time="50" @click="signIn" :style="{backgroundImage: isSign?vk.getVuex('$app.config.bg.button_dis'):vk.getVuex('$app.config.bg.button'), color: isSign?vk.getVuex('$app.config.color.button_dis'):vk.getVuex('$app.config.color.button')}">{{isSign?'已签到':'去签到'}}</view>
				</view>
				<view class="tab u-flex u-row-between u-col-center border-bottom u-p-t-30 u-p-b-30">
					<view class="u-flex u-row-left u-col-center">
						<view class="icon u-flex u-row-center u-col-center"><u-icon name="/static/icon/user1.png" size="46"></u-icon></view>
						<view class="u-p-l-20 u-p-t-10" :style="{color: vk.getVuex('$app.config.color.light')}">
							<view class="u-flex u-row-left u-col-bottom">
								<view class="u-p-r-10" :style="{color: vk.getVuex('$app.config.color.main')}">邀请好友</view>
								<view class="u-font-12" v-if="vk.getVuex('$setting.score.video_num') > 0">{{userCount}}/{{vk.getVuex('$setting.score.invite_num')}}/天</view>
								<view class="u-font-12" v-else>成功邀请 {{userCount}} 人</view>
							</view>
							<view class="u-font-12 u-p-t-5">+{{vk.getVuex('$setting.score.invite_score')}}{{vk.getVuex('$setting.score.name')}}/位</view>
						</view>
					</view>
					<view class="btn" hover-class="hover-class" hover-stay-time="50" :style="{backgroundImage: vk.getVuex('$app.config.bg.button'), color: vk.getVuex('$app.config.color.button')}">
						去邀请
						<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
					</view>
				</view>
				<view class="tab u-flex u-row-between u-col-center border-bottom u-p-t-30 u-p-b-30" v-if="vk.getVuex('$setting.client.videos_id')">
					<view class="u-flex u-row-left u-col-center">
						<view class="icon u-flex u-row-center u-col-center"><u-icon name="/static/icon/video.png" size="46"></u-icon></view>
						<view class="u-p-l-20 u-p-t-10" :style="{color: vk.getVuex('$app.config.color.light')}">
							<view class="u-flex u-row-left u-col-bottom">
								<view class="u-p-r-10" :style="{color: vk.getVuex('$app.config.color.main')}">观看视频</view>
								<view class="u-font-12" v-if="vk.getVuex('$setting.score.video_num') > 0">{{videoCount}}/{{vk.getVuex('$setting.score.video_num')}}/天</view>
							</view>
							<view class="u-font-12 u-p-t-5">+{{vk.getVuex('$setting.score.video_score')}}{{vk.getVuex('$setting.score.name')}}/次</view>
						</view>
					</view>
					<view class="btn" hover-class="hover-class" hover-stay-time="50" @click="adClick" :style="{backgroundImage: vk.getVuex('$app.config.bg.button'), color: vk.getVuex('$app.config.color.button')}">去观看</view>
				</view>
				<view class="u-font-12 u-text-center u-p-t-40" :style="{color: vk.getVuex('$app.config.color.light')}">更多任务敬请期待~</view>
			</view>
		</view>
		
		<models v-if="signShow"
		:title="signTitle"
		btnText="知道了" 
		closeText=" " 
		@mask="signShow = false" 
		@save="signShow = false"></models>
	</view>
</template>

<script>
	var videoAd = null
	export default {
		data() {
			return {
				// 签到
				isSign: false,
				signShow: false,
				signTitle: '',
				userCount: 0,
				videoCount: 0
			};
		},
		async onLoad() {
			var that = this
			if(that.vk.getVuex('$user.userInfo._id')){
				await that.getSign()
				await that.getVideoScore()
				await that.getInviteScore()
			}
			that.$nextTick(() => {
				that.$refs.loading.closeLoading()
			})
			// #ifdef MP
			that.adLoad()
			// #endif
		},
		methods: {
			// 我的
			async getSign(){
				let that = this
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/count',
					data:{
						dbName: 'uni-id-scores',
						user_id: that.vk.getVuex('$user.userInfo._id'),
						comment: '每日签到',
						day: true
					},
				});
				if(data.num > 0) that.isSign = true
				else that.isSign = false
			},
			async getVideoScore(){
				let that = this
				let video = await that.vk.callFunction({
					url: 'client/wechat/list/kh/count',
					data:{
						dbName: 'uni-id-scores',
						user_id: that.vk.getVuex('$user.userInfo._id'),
						comment: '观看视频广告',
						day: true
					},
				});
				that.videoCount = video.num
			},
			async getInviteScore(){
				var that = this
				var userCount = 0
				if(that.vk.getVuex('$setting.score.video_num') > 0){
					let user = await that.vk.callFunction({
						url: 'client/wechat/list/kh/count',
						data:{
							dbName: 'uni-id-scores',
							user_id: that.vk.getVuex('$user.userInfo._id'),
							comment: '邀请用户',
							day: true
						},
					});
					userCount = user.num
				}else{
					let user = await that.vk.callFunction({
						url: 'client/wechat/list/kh/count',
						data:{
							dbName: 'uni-id-scores',
							user_id: that.vk.getVuex('$user.userInfo._id'),
							comment: '观看视频广告',
							day: true
						},
					});
					userCount = user.num
				}
				that.userCount = userCount
			},
			async signIn(){
				var that = this
				if(!that.vk.getVuex('$user.userInfo._id')){
					that.loginShow = true
					return
				}
				if(that.isSign) return
				
				uni.showLoading({
					mask: true,
					title: '签到中...'
				})
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/setSign',
					data:{
						_id: that.vk.getVuex('$user.userInfo._id')
					},
				});
				uni.hideLoading()
				if(data.code === 0){
					that.getSign()
					that.vk.setVuex('$user.userInfo.score', data.user.score)
					that.signTitle = "<div style='padding-top: 10px;'>签到成功，恭喜你获得<span class='num' style='color: "+that.vk.getVuex('$app.config.color.sec')+"'>"+data.score+"</span>"+that.vk.getVuex('$setting.score.name')+"，明天记得来哦~</div>"
					that.signShow = true
					that.isSign = true
				}else{
					uni.showToast({
						icon: 'none',
						mask: true,
						title: sign.result.msg,
						duration: 1500
					})
				}
			},
			adClick(){
				var that = this
				if (videoAd) {
					videoAd.show().catch(err => {
					// 失败重试
					// console.log("广告拉去失败")
					videoAd.load().then(() => videoAd.show())
					})
				}
			},
			adLoad(){
				var that = this
				let adUnitId = that.vk.getVuex('$setting.client.videos_id')
				console.log("adUnitId",adUnitId)
				if(adUnitId){
					// 加载激励视频广告
					videoAd = uni.createRewardedVideoAd({
						adUnitId: adUnitId
					});
					//捕捉错误
					videoAd.onError(err => {
						// 进行适当的提示
						console.log('videoAd onError', err);
					});
					// 监听关闭
					videoAd.onClose(async status => {
						that.downShow = false
						if (status && status.isEnded) {
							// 正常播放结束，下发奖励
							if(that.vk.getVuex('$user.userInfo._id')){
								let res = await that.vk.myfn.upScore(that.vk.getVuex('$user.userInfo._id'),'video','观看视频广告')
								that.getVideoScore()
								that.signTitle = "<div style='padding-top: 10px;'>观看成功，恭喜你获得<span class='num' style='color: "+that.vk.getVuex('$app.config.color.sec')+"'>"+res.score+"</span>"+that.vk.getVuex('$setting.score.name')+"，当前有<span class='num' style='color: "+that.vk.getVuex('$app.config.color.sec')+"'>"+that.vk.getVuex('$user.userInfo.score')+"</span>"+that.vk.getVuex('$setting.score.name')+"，赶紧去下载吧~</div>"
								that.signShow = true
							}
						} else {
							// 播放中途退出，进行提示
							console.log('中途退出')
						}
					});
				}
			},
		},
		onShareAppMessage(res) {
			return {
				title: '这里有超多好看的壁纸免费下载~',
				imageUrl: this.vk.getVuex('$setting.base.image'),
				path: 'pages/index/index?inviteId=' + (this.vk.getVuex('$user.userInfo._id') ? this.vk.getVuex('$user.userInfo._id') : '')
			};
		}
	};
</script>

<style lang="scss">
	.top{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		image{
			width: 180rpx;
			height: 180rpx;
			opacity: 0.6;
		}
		.kapian{
			position: relative;
			height: 260rpx;
			// margin: 30rpx 30rpx 0 30rpx;
			background: linear-gradient(to bottom right, #7a95ee, #7050f0);
			color: #FFFFFF;
			// border-radius: 24rpx;
			overflow: hidden;
			.price{
				font-size: 32px;
				font-weight: 700;
			}
			.shuom{
				color: #E5E5E5;
			}
		}
	}
	.title {
		border-left: 8rpx solid #f8c93c;
		padding-left: 15rpx;
		line-height: 34rpx;
		color: #FFFFFF;
	}
	.tab {
		color: #FFFFFF;
		.icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 80rpx;
		}
		.btn {
			color: #6d3b03;
			position: relative;
			background-image: linear-gradient(to right, #fcfc44, #f8c93c);
			padding: 7px 15px;
			border-radius: 20px;
			font-size: 12px;
		}
		.hover-class {
			transform: scale(0.95);
			transition: all 0.2s;
		}
	}
	.tab:nth-child(1) .icon {
		background-image: linear-gradient(to right, #f5d553, #f0b347);
	}
	.tab:nth-child(2) .icon {
		background-image: linear-gradient(to right, #84d787, #5fbb92);
	}
	.tab:nth-child(3) .icon {
		background-image: linear-gradient(to right, #6cb3ff, #5476f1);
	}
	.tab:nth-child(4) .icon {
		background-image: linear-gradient(to right, #fa7a09, #ee6000);
	}
	
	/deep/ .num{
		font-size: 16px;
		font-weight: 700;
		padding: 0 8rpx;
	}
</style>
